<html>
<head>
    <!-- title标签用于设置页面标题 -->
    <title>打字练习</title>
    <meta charset="utf-8">
    <style>
        #char {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            /* 设置边框的宽度，颜色，样式*/
            border: 7px solid black;
            /* 设置边框圆角半径，设置为元素宽高的一半时能够显示为圆形 */
            border-radius: 250px;
            /* 设置文本字体大小*/
            font-size: 350px;
            /* 字体颜色 */
            /* color:black;                 */
            /* 当行高和元素本身高度一样事，可以实现文本垂直居中 */
            line-height: 500px;
        }

        #result {
            font-size: 30px;
        }

        body {
            text-align: center;
            color: black;
        }
        @keyframes sway{
            0%{
                transform: translate(0,0);
            }
            25%{
                transform: translate(-30px,0);
            }
            50%{
                transform: translate(0,0);
            }
            75%{
                transform: translate(30px,0);
            }
            100%{
                transform: translate(0,0);
            }
        }
        .err{
            color: red;
            animation: sway 300ms linear;
            animation-iteration-count:infinite;
        }   
        @keyframes spin{
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }   
        .show{
            animation: spin 300ms;
        }          
    </style>
</head>

<body>
    <div id="char">
        <div id="inner">M</div>
    </div>
    <p id="result">正确0个，错误0个；正确率0%</p>
</body>
<script>
    // 定义两个变量，分别记录正确数量和错误数量
    var correct = 0;
    var wrong = 0;

    // 获得页面中id为char的元素（div）
    var char = document.getElementById("inner");
    var result = document.getElementById("result");
    var timer = null;
    // onkeydown.   键盘按下事件
    document.body.onkeydown = function (e) {
        // 定时
        if(!timer){
            timer = setTimeout(()=>{
                alert("时间到");
            },60000);
        }

        // e.key标示按下的键。
        // toUpperCase将字符转换为大写
        var input = e.key.toUpperCase();
        if (e.keyCode >= 65 && e.keyCode <= 90) {
            var input = e.key.toUpperCase();
            if (input == char.textContent) {
                createChar();
                char.classList.add("show");
                setTimeout(function(){
                    // 移除一个class属性
                    char.classList.remove("show");                    
                }, 300);
                // ++表示自增1
                correct++;
            } else {
                // 为元素添加一个class属性
                char.classList.add("err");
                // 延迟执行一段代码
                setTimeout(function(){
                    // 移除一个class属性
                    char.classList.remove("err");                    
                }, 300);
                wrong++;
            }
            // 
            count();
        }
    }

    // 生成随机字母的函数
    function createChar() {
        // Math.random()生成一个[0,1）的随机数，可能等于0，单不会等于1.
        var num = Math.random() * 26;
        // Math,floor向下取整
        num = Math.floor(num);
        num = num + 65;
        // 将数字转换为字符。
        var ch = String.fromCharCode(num);
        char.textContent = ch;
    }
    // 调用函数中的代码才会执行
    createChar();
    // 统计结果的函数
    function count(){
        var rate = correct/(correct+wrong)*100;
        rate=rate.toFixed(2);
        result.textContent="正确："+correct+"个,错误："+wrong+"个，正确率："+rate+"%";
    }
</script>
</html>